<template>
  <van-cell title-style="font-size: 14px" @click="toggleHandle">
    <template #title>
      <span class="custom-title">{{ childNode.name }}</span>
    </template>
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon :name="isFolder ? 'arrow-down' : 'edit'" />
    </template>
  </van-cell>
  <div style="margin-left: 0.45rem" v-show="isOpen" v-if="isFolder">
    <subject-tree-childNode v-for="child in childNode.children" :key="child" :childNode="child" @make-folder="$emit('make-folder', $event)">
       <span class="custom-title">{{ child.name }}</span>
    </subject-tree-childNode>
  </div>
</template>
<script>
import { defineComponent,computed, ref } from "vue";
export default defineComponent({
  name: 'subject-tree-childNode',
  props: {
    childNode: Object
  },
  emits: ["make-folder"],
  setup(props,{ emit }) {
    const activeName = ref('1')
    const isOpen = ref(false);
    const isFolder = computed(() => {
      return props.childNode.children && props.childNode.children.length;
    });

    const toggleHandle = () => {
      if (isFolder.value){
        isOpen.value = !isOpen.value
      } else {
        isOpen.value = true;
        emit("make-folder", props.childNode);
      }
    };

    return {
      activeName,
      isFolder,
      isOpen,
      toggleHandle
    };
  },
});
</script>

<style lang="less" scoped>

</style>
